<!DOCTYPE HTML>
<html>
 <head>
  <title> 表单联动</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
   <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
    code {
      padding: 0px 4px;
      color: #d14;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
   </style>
 </head>
 <body>
  
  <div class="container">
    <div class="row">
      <div class="span8">
        <h2>简介</h2>
        <p>表单控件可以使用配置的方式，来执行表单字段和表单分组的一些联动,例如：</p>
        <ol>
          <li>显示/隐藏</li>
          <li>禁用/可用</li>
          <li>清空数据</li>
        </ol>
        <p>表单控件会将内部的html元素转换成JS控件，所以可以在将配置项配置到html元素上。目前表单上主要有2类控件：</p>
        <ol>
          <li>表单字段控件：input,select,textarea,checkbox,radio都会转换成表单字段控件。请<a href="http://http://www.builive.com//docs/#!/api/BUI.Form.Field">参看ＡＰＩ</a>。</li>
          <li>表单容器控件：form,form-group是包含多个表单字段的容器事件。</li>
        </ol>
        <p>表单字段控件和分组控件的联动其实是一种快速注册事件的方式，右边进行了详细的介绍。</p>
      </div>
      <div class="span16">
        <h2>快速注册事件</h2>
        <p>在页面html上配置快速注册事件的写法如下：</p>
        <pre class="prettyprint linenums">
&lt;!-- 当 id 为'btn1'的控件或者DOM元素，点击的时候，自己显示--&gt;
&lt;!-- 当 id 为'btn2'的控件或者DOM元素，点击的时候，自己隐藏--&gt;
&lt;input type="text" name="a" data-depends="{'#btn1:click':['show'],'#btn2:click':['hide']}" /&gt;
        </pre>
        <p><code>data-depends</code>配置项对应控件的 <code>depends</code>配置项</p>
        <p><code>depends</code>:是一个键值对的对象：</p>
        <ol>
          <li>属性名："#id:event" 是一个id和事件的组合，如果id指向的DOM已经转换成JS控件，那么事件名可以使用该控件的事件名，否则使用DOM的事件。</li>
          <li>属性值：
            <ol>
              <li>
                可以是['method1','method2'...'methodn']，是一个数组，里面包含控件的方法名，当事件触发时，执行控件对应的方法。
              </li>
              <li>
                也可以是 function(event){} 回调函数
              </li>
            </ol>
          </li>
        </ol>
        <h3>示例</h3>
        <p>点击按钮时执行对应的操作：</p>
        <div class="well">
          <button id="btn" class="button button-small">展开/折叠</button>
          <button id="btn1"  class="button button-small">禁用分组</button>
          <button id="btn2"  class="button button-small">可用分组</button>
          <button id="btn3"  class="button button-small">清空数据</button>
        </div>
        <form id="J_Form" class="form-horizontal" data-depends="{'#btn:click':['toggle'],'#btn3:click':['clearFields']}">
          <div class="row">
            <div class="control-group span8">
              <label class="control-label"><s>*</s>供应商编码：</label>
              <div class="controls">
                <input name="id" type="text" data-rules="{required:true}" class="input-normal control-text">
              </div>
            </div>
            <div class="control-group span8">
              <label class="control-label"><s>*</s>供应商类型：</label>
              <div class="controls">
                <select  data-rules="{required:true}"  name="type" class="input-normal"> 
                  <option value="">请选择</option>
                  <option value="saler">淘宝卖家</option>
                  <option value="large">大厂直供</option>
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="control-group span15 ">
              <label class="control-label">起始日期：</label>
              <div id="range" class="controls bui-form-group" data-depends="{'#btn1:click':['disable'],'#btn2:click':['enable']}">
                <input name="start" class="calendar" type="text"><label>&nbsp;-&nbsp;</label><input name="end" class="calendar" type="text">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="control-group span15">
              <label class="control-label">备注：</label>
              <div class="controls control-row4">
                <textarea name="memo" class="input-large" type="text"></textarea>
              </div>
            </div>
          </div>
        </form>
        <pre class="prettyprint linenums">
&lt;form id="J_Form" class="form-horizontal" data-depends="{'#btn:click':['toggle'],'#btn3:click':['clearFields']}"&gt;
  &lt;div class="row"&gt;
    &lt;div class="control-group span8"&gt;
      &lt;label class="control-label"&gt;&lt;s&gt;*&lt;/s&gt;供应商编码：&lt;/label&gt;
      &lt;div class="controls"&gt;
        &lt;input name="id" type="text" data-rules="{required:true}" class="input-normal control-text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="control-group span8"&gt;
      &lt;label class="control-label"&gt;&lt;s&gt;*&lt;/s&gt;供应商类型：&lt;/label&gt;
      &lt;div class="controls"&gt;
        &lt;select  data-rules="{required:true}"  name="type" class="input-normal"&gt; 
          &lt;option value=""&gt;请选择&lt;/option&gt;
          &lt;option value="saler"&gt;淘宝卖家&lt;/option&gt;
          &lt;option value="large"&gt;大厂直供&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="control-group span15 "&gt;
      &lt;label class="control-label"&gt;起始日期：&lt;/label&gt;
      &lt;div id="range" class="controls bui-form-group" data-depends="{'#btn1:click':['disable'],'#btn2:click':['enable']}"&gt;
        &lt;input name="start" class="calendar" type="text"&gt;&lt;label&gt;&nbsp;-&nbsp;&lt;/label&gt;&lt;input name="end" class="calendar" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="control-group span15"&gt;
      &lt;label class="control-label"&gt;备注：&lt;/label&gt;
      &lt;div class="controls control-row4"&gt;
        &lt;textarea name="memo" class="input-large" type="text"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;          
        </pre>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>

  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript">
    BUI.use('common/page');
  </script>
  <!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
  <script type="text/javascript" src="../assets/js/prettify.js"></script>
  <script type="text/javascript">
    $(function () {
      prettyPrint();
    });
  </script> 
<!---->
<script type="text/javascript">
  BUI.use('bui/form',function (Form) {
    new Form.HForm({
      srcNode : '#J_Form'
    }).render();
  });
</script>


<body>
</html>  